<template>
  <div class="boxTreatment">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">箱处理</span>
      </div>
      <div  class="box-button">
        <el-button @click="dialogOpen">集拼箱</el-button>
        <el-button @click="dialogChangeBoxOpen">换箱</el-button>
      </div>
    </el-card>
    <s-dialog :dialog="dialog" :close="dialogInit">
      <el-collapse value="1">
        <!--name="1":设置collapse默认打开-->
        <el-collapse-item title="箱明细" name="1">
          <s-form :form="formDialog" ref="formDialog">
            <el-form-item prop="xbh" label="箱编号">
              <el-input
                type="text"
                ref="xbhjd"
                style="width:60%"
                v-on:change="xbhchange"
                v-model="xbhinput"
                placeholder="箱编号"></el-input>
              <el-button  ref="qd" style="float: right;" type="primary" @click="getxxh">添加</el-button>
            </el-form-item>
          </s-form>
          <s-table :table="table" ref="table" @http="tableWatch" :expand="false" :pagination="false">
          </s-table>
        </el-collapse-item>
        <el-collapse-item title="箱操作" name="1">
          <s-table :table="table_dialogxbh" ref="tablexbh" @http="tableWatch" :expand="false" :pagination="false">
          </s-table>
          <s-form :form="formDialog">
            <el-form-item prop="xx" label="箱型">
              <el-select v-model="xxselect"
                         filterable
                         placeholder="请选择"
                         style="width:40%">
                <el-option
                  v-for="item in options"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
              <!--<el-button  ref="px" style="float: right;margin-left: 5px" type="primary" @click="printpaper">打印</el-button>-->
              <el-button  ref="px" style="float: right;" type="primary" @click="pxoption">拼箱</el-button>
            </el-form-item>
          </s-form>
        </el-collapse-item>
      </el-collapse>
    </s-dialog>
    <s-dialog :dialog="dialog_hx" :close="dialogInit_Hx">
      <el-collapse value="1">
        <!--name="1":设置collapse默认打开-->
        <el-collapse-item title="换箱" name="1">
          <s-form :form="formDialog" ref="formDialog">
            <el-form-item prop="xbh_hx" label="箱编号">
              <el-input
                type="text"
                ref="xbhjd_hx"
                v-on:change="xbhchange_hx"
                v-model="xbhinput_hx"
                placeholder="箱编号"></el-input>
              <!--<el-button  ref="tj" style="float: right;" type="primary" @click="insertData">添加</el-button>-->
            </el-form-item>
          </s-form>
          <s-table :table="table_dialoghx" ref="table_dialoghx" @http="tableWatch" :expand="false" :pagination="false">
          </s-table>
          <s-form :form="formDialog">
            <el-form-item prop="xx_hx" label="箱型">
              <el-select v-model="xxselect_hx"
                         placeholder="请选择"
                         style="width:60%">
                <el-option
                  v-for="item in options"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
              <el-button  ref="hx" style="float: right;" type="primary" @click="changeBox">换箱</el-button>
            </el-form-item>
          </s-form>
        </el-collapse-item>
      </el-collapse>
    </s-dialog>
  </div>
</template>

<script>
  import {AutoVue, GetLodop} from '~/plugins/Tools';

  function __form () {
    return {
      mc: { value: '', rule: [ 'vNull' ], search: true },
      bz: { value: '', rule: [], search: false },
      dm: { value: '', rule: [ 'vNull' ], cRemarks: '' },
      // xbh: { value: '', rule: [ 'vNull' ], cRemarks: '' },
    };
  }
  export default AutoVue({
    name: 'outOperation_boxTreatment-FEcarWms',
    head: {
      'title': '箱处理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 箱处理 查看箱处理信息' },
      ],
    },
    store: [''],
    data: {
      options: [],
      table: {
        column: [
          { label: '箱编号',
            prop: 'xbh',
            minWidth: '0px',
            search: true,
          },
          { label: '货品编号',
            prop: 'hpbh',
            minWidth: '0px',
            search: false,
          },
          { label: '货品名称',
            prop: 'hpmc',
            minWidth: '0px',
            search: false,
          },
          { label: '数量',
            prop: 'sl',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '/wmsSetBox/getXmx',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      table_dialogxbh: {
        column: [
          { label: '箱编号',
            prop: 'xbh',
            minWidth: '0px',
            search: true,
          },
          { label: '货品编号',
            prop: 'hpbh',
            minWidth: '0px',
            search: false,
          },
          { label: '货品名称',
            prop: 'hpmc',
            minWidth: '0px',
            search: false,
          },
          { label: '数量',
            prop: 'sl',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      table_dialoghx: {
        column: [
          { label: '箱编号',
            prop: 'xbh',
            minWidth: '0px',
            search: true,
          },
          { label: '货品编号',
            prop: 'hpbh',
            minWidth: '0px',
            search: false,
          },
          { label: '货品名称',
            prop: 'hpmc',
            minWidth: '0px',
            search: false,
          },
          { label: '数量',
            prop: 'sl',
            minWidth: '0px',
            search: false,
          },
        ],
        url: '',
        key: 'id',
        tableColumn: 4,
        muti: false,
      },
      formDialog: __form(),
      dialog: {
        title: '箱明细',
        row: {},
      },
      dialog_hx: {
        title: '换箱',
        row: {},
      },
      xbhinput: '',
      xbhinput_hx: '',
      xzlx: '',
      lxr: '',
      address: '',
      weight: '0.00',
      xxselect: '',
      xxselect_hx: '',
      xidarr: [],
      xbhid: '',
      hxid: '',
      objcheck: {},
    },
    transition: 'slide-fade',
    methods: {
      dialogInit () {
        this.xbhinput = '';
        this.table_dialogxbh.data = [];
        this.table.data = [];
        this.objcheck = {};
        this.xxselect = '';
        console.log('集装箱已清空');
      },
      dialogInit_Hx () {
        this.xbhinput_hx = '';
        this.xxselect_hx = '';
        this.table_dialoghx.data = [];
        console.log('换箱已清空');
      },
      dialogOpen () {
        this.dialogselect();
        this.dialog.visible = true;
        //  获取input聚焦(光标聚焦)
        setTimeout(() => {
          // console.log(this.$refs);
          // console.log(this.$refs.a11111.$el.children[0]);
          this.$refs.xbhjd.$el.children[0].focus();
        }, 500);
      },
      dialogChangeBoxOpen () {
        this.dialogselect();
        this.dialog_hx.visible = true;
        //  获取input聚焦(光标聚焦)
        setTimeout(() => {
          // console.log(this.$refs);
          // console.log(this.$refs.a11111.$el.children[0]);
          this.$refs.xbhjd_hx.$el.children[0].focus();
        }, 500);
      },
      xbhchange () {
        if (this.xbhinput.length === 18) {
          this.$refs.xbhjd.$el.children[0].select();
          this.table.data = [];
          this.xzlx = '';
          this.weight = '';
          this.getTableData(this.xbhinput);
          this.$nextTick(() => {
          });
        }
      },
      xbhchange_hx () {
        if (this.xbhinput_hx.length === 18) {
          this.$refs.xbhjd_hx.$el.children[0].select();
          this.table_dialoghx.data = [];
          this.getDialogTableData(this.xbhinput_hx);
          this.$nextTick(() => {
          });
        }
      },
      // 获取数据
      async getTableData (data) {
        let json = '';
        if (this.table_dialogxbh.data.length === 0) {
          try {
            json = await this.post('/wmsSetBox/getXmx', {
              xbh: data,
            });
          } catch (err) {
            console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
          }
        } else {
          try {
            json = await this.post('/wmsSetBox/getXmx', {
              xbh: data,
              dz: this.address,
            });
          } catch (err) {
            console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
          }
        }
        if (json.contentList !== undefined) {
          this.table.data = json.contentList;
          this.weight = json.zzl;
        }
      },
      async getDialogTableData (data) {
        let json = '';
        try {
          json = await this.post('/wmsSetBox/getXmx', {
            xbh: data,
          });
          if (json.contentList !== undefined) {
            this.table_dialoghx.data = json.contentList;
            this.hxid = json.contentList[0].id;
            console.log(json.contentList[0].id, json.contentList[1].id);
          }
        } catch (err) {
          console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
        }
      },
      async printpaper () {
        // window.open = 'http://ckd.im/9Z4Cd';
        let xxid = this.xxselect;
        let id = this.xbhid;
        try {
          let postdata = await this.get('/wmsSetBox/setXx/' + id + '/' + xxid);
          // let url = postdata.data;
          let url = postdata.data[0];
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印快递面单');
          LODOP.ADD_PRINT_URL(0, 0, 746, '100%', url);
          LODOP.SET_PRINT_STYLEA(0, 'HOrient', 3);
          LODOP.SET_PRINT_STYLEA(0, 'VOrient', 3);
          setTimeout(() => {
            LODOP.PREVIEW();
          }, 3000);
        } catch (err) {
          window.open('http://ckd.im/9Z4Cd');
        }
      },
      async getxxh () {
        if (this.table_dialogxbh.data.length === 0) {
          this.objcheck[this.xbhinput] = true;
          try {
            let json = await this.post('/wmsSetBox/getXmx', {
              xbh: this.xbhinput,
            });
            /* for (let i = 0; i < json.contentList.length; i++) {
              this.xidarr.push(json.contentList[i].id);
            } */
            this.table_dialogxbh.data = json.contentList;
            this.address = json.contentList[0].dz;
            this.lxr = json.contentList[0].lxr;
          } catch (err) {
            console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
          }
        } else {
          if (this.objcheck[this.xbhinput] !== true) {
            this.objcheck[this.xbhinput] = true;
            try {
              let json = await this.post('/wmsSetBox/getXmx', {
                xbh: this.xbhinput,
                dz: this.address,
              });
              if (json.contentList.length > 0) {
                this.table.data = json.contentList;
                for (let i = 0; i < json.contentList.length; i++) {
                  this.table_dialogxbh.data.push(json.contentList[i]);
                }
              }
            } catch (err) {
              console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
            }
          } else {
            this.$message('同一编号信息不允许重复添加！');
          }
        }
      },
      async dialogselect (query) {
        let json = await this.get('/wmsSetBox/getXx/');
        this.options = json;
      },
      async pxoption () {
        let idarr = [];
        if (this.xxselect === '') {
          this.$message('请先选择箱型！');
        } else {
          for (let i = 0; i < this.table_dialogxbh.data.length; i++) {
            idarr.push(this.table_dialogxbh.data[i].id);
          }
          try {
            let json = await this.post('/wmsSetBox/add', {
              lxr: this.lxr,
              dz: this.address,
              zzxid: this.xxselect,
              ids: idarr,
            });
            this.address = '';
            this.lxr = '';
            this.xbhid = json.data.id;
            this.table_dialogxbh.data = [];
            this.printpaper();
          } catch (err) {
            console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
          }
        };
      },
      async changeBox () {
        let xxid = this.xxselect_hx;
        let id = this.hxid;
        try {
          let json = await this.get('/wmsSetBox/setXx/' + id + '/' + xxid);
        } catch (err) {
          console.log('捕捉到异常：', err); // 这里捕捉到错误 `error`
        };
      },
    },
    mounted: function () {
      console.log('this is boxtreatment.vue');
      this.tableWatch('table');
    },
  });
</script>
<style scoped lang="scss">
  .box-button {
    text-align:center;
    width:100%;
    height:100%;
    margin:0px;
  }
  .button {
    margin-left: 10px;
  }
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
</style>
